<template>
<div>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/admin/index' }">
        <i class="el-icon-s-promotion"></i>
        管理后台首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>添加床位</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <el-card class="box-card">
      <h1 style="font-size: 25px;margin-bottom: 25px;text-align: center">入住登记信息添加</h1>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="楼层号:" prop="floor">
          <el-select v-model="ruleForm.floor" placeholder="请选择">
            <el-option
                v-for="item in floorOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房间号:" prop="roomnum">
          <el-input v-model="ruleForm.roomnum" placeholder="请输入房间号" style="width: 380px"></el-input>
        </el-form-item>
        <el-form-item label="床位号:" prop="bednum">
          <el-input v-model="ruleForm.bednum" placeholder="请输入床位号" style="width: 380px"></el-input>
        </el-form-item>
        <el-form-item label="床位价格:" prop="price">
          <el-input v-model="ruleForm.price" placeholder="请输入床位价格" style="width: 380px"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')" style="margin-top: 10px">添加</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</div>
</template>

<script>
export default {
  data() {
      return {
        floorOptions: [{name: '1楼', value: 1}, {name: '2楼', value: 2}, {name: '3楼', value: 3}, {
          name: '4楼',
          value: 4
        }, {name: '5楼', value: 5}, {name: '6楼', value: 6}],
        ruleForm: {
          floor: '',
          roomnum: '',
          price: '',
          bednum: ''
        },
        rules: {
          floor: [
            {required: true, message: '请选择楼层号', trigger: 'blur'}
          ],
          roomnum: [
            {required: true, message: '请输入房间号', trigger: 'blur'},
            {pattern: /^[0-9]{3}$/, message: '必须是3位数的房间号', trigger: 'blur'}
          ],
          price:
              [
                {required: true, message: '请输入床位价格', trigger: 'blur'},
                {pattern: /^([1-9]\d*(\.\d{1,2})?)|(^0(\.\d{1,2})?$)/, message: '价格必须是小数', trigger: 'blur'}
              ]
          , bednum: [
            {required: true, message: '请输入床位号', trigger: 'blur'}
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.axios.create({
                  headers:{
                    'Authorization':localStorage.getItem("jwt")
                  }
                }
            ).post("http://localhost:8080/bed/add-new?"+this.qs.stringify(this.ruleForm)).then((response)=>{
             if(response.data.state==20000)
             {
               this.$message.success("添加成功！");
               this.resetForm(formName);
             }
             else {
               this.$message.error(response.data.message);
             }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    }
}
</script>

<style>
.box-card{
  width: 80%;
  height: 600px;
  margin: 0 auto;
}
.demo-ruleForm{
  width: 35%;
  margin: 0 auto;
  margin-top: 50px;
}
</style>